<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;margin: 0;
			}
			.big{
				width: 200px;height: 200px;border: 1px solid red;margin: auto;
				display: flex;flex-wrap: wrap;justify-content: center;
			}
			.box1{
				width: 50px;height: 50px;background: red;margin: 3px;
				
			}
			
		</style>
	</head>
	<body>
		<div class="big">
			<div class="box1"></div>
			<div class="box1"></div>
			<div class="box1"></div>
			<div class="box1" style="background:
				-webkit-radial-gradient(red 50%,orange 50% );"></div>
			<div class="box1" style="background:
				 -webkit-linear-gradient( top,yellow,green,pink );"></div>
			<div class="box1" style="background:
				 -webkit-gradient( linear,0 0,0 100%,from(red),to(blue) );"></div>
		</div>
	</body>
</html>
